<template>
    <el-dialog
        :title="'本地导入'" v-model="dialogVisible" width="600px" :before-close="handleClose" @closed="handleClose"
    >
        <el-upload
            class="upload-demo"
            drag
            accept=".pdf"
            v-model:file-list="fileList"
            show-file-list
            v-if="dialogVisible"
            :on-remove="UploadRemove"
            multiple
            :auto-upload="false"
            v-loading="uploading"
            @change="UploadChange"
        >
            <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
            <div class="el-upload__text">
               将文件拖拽到此处或<em>点击上传</em>
            </div>
            <template #tip>
                <div class="el-upload__tip">
                    仅支持.pdf文件
                </div>
            </template>
            <template #file="{ file, index}">
                <div class="flexC" style="justify-content: space-between; width: 100%;">
                    <span>{{ file.name }}</span>
                    <el-button type="text" @click="handleRemove(index)" :icon="Close" link></el-button>
                </div>
            </template>
        </el-upload>
        <div class="dialog-footer" >
            <el-button type="primary" @click="handleSubmit" :loading="submitLoad">确定</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import { UploadFilled, Close } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { ProjectLocalFileUpload, ProjectLocalFileImport } from '@/api/project';
const dialogVisible = ref(false);
const route = useRoute();
const uploading = ref(false);
const submitLoad = ref(false);
const fileList = ref([]);
const FileBase64 = ref([]);
const uploadFileNUm = ref(0);
const emit = defineEmits(['close']);
const open = () => {
    dialogVisible.value = true;
};
const handleClose = () => {
    dialogVisible.value = false;
    uploading.value = false;
    fileList.value = [];
    FileBase64.value = [];
};
watch(dialogVisible, (newVal, oldVal) => {
    if(!newVal){
        fileList.value = [];
        FileBase64.value = [];
    }
})

const UploadChange = async (file, List) => {
    uploadFileNUm.value = uploadFileNUm.value + 1;
    uploading.value = true;
    let Form = new FormData();
    Form.append('file', file.raw);
    Form.append('id', route.query.id);
    let result = await ProjectLocalFileUpload(Form);
    uploadFileNUm.value = uploadFileNUm.value - 1;
    if(uploadFileNUm.value == 0){
        uploading.value = false;
    }
    if(result.errorCode == 0){
        // ElMessage.success('上传成功');
        FileBase64.value.push(result.data);
    }else{
        // ElMessage.error('上传失败');
    }
}
const UploadRemove = (file, List) => {
    console.log(file, List,fileList.value);
}
const handleRemove = (index) => {
    fileList.value.splice(index, 1);
    FileBase64.value.splice(index, 1);
}
const handleSubmit = async ()=>{
    if(FileBase64.value.length == 0){
        ElMessage.warning('请上传文件');
        return;
    }
    submitLoad.value = true;
    const res = await ProjectLocalFileImport({
        id: route.query.id,
        paths: FileBase64.value
    });
    submitLoad.value = false;
    if(res.errorCode == 0){
        ElMessage.success('导入成功');
        setTimeout(() => {
            dialogVisible.value = false;        
            emit('close');
        }, 1000);
    }
}
defineExpose({
    open
})
</script>

<style scoped lang="scss">
.dialog-footer{
    margin-top: 20px;
    text-align: right;
}
</style>